<template>
  <div class="social-relation">
    <!-- 主容器：使用Grid表格布局 -->
    <div class="social-relation-grid" :style="{ gridTemplateRows: `repeat(${totalRows}, auto)` }">
      <!-- 顶部标签行（动态生成） -->
      <template v-for="(row, rowIndex) in topLabelRows" :key="`top-${rowIndex}`">
        <template v-for="(pillar, colIndex) in pillars" :key="`top-${rowIndex}-${colIndex}`">
          <div class="grid-relation-cell" :style="{ gridColumn: getColumnIndex(colIndex) }">
            <!-- 日柱（index 2）固定显示"自己"，且只在最下面一行显示 -->
            <template v-if="colIndex === 2 && rowIndex === topLabelRows.length - 1">
              自己
            </template>
            <template v-else>
              {{ colIndex === 2 ? '' : (row[colIndex] || '') }}
            </template>
          </div>
          <template v-if="colIndex < pillars.length - 1">
            <div class="grid-spacer" :style="{ gridColumn: getColumnIndex(colIndex, true) }"></div>
          </template>
        </template>
      </template>

      <!-- 天干十神行 -->
      <template v-for="(pillar, colIndex) in pillars" :key="`tenshen-gan-${colIndex}`">
        <div class="grid-tenshen-cell" :style="{ gridColumn: getColumnIndex(colIndex) }">
          <!-- 日柱（index 2）显示"元男"或"元女" -->
          {{ colIndex === 2 ? `元${props.gender === '女' ? '女' : '男'}` : (pillar.tenStar || '') }}
        </div>
        <template v-if="colIndex < pillars.length - 1">
          <div class="grid-spacer" :style="{ gridColumn: getColumnIndex(colIndex, true) }"></div>
        </template>
      </template>

      <!-- 天干行 -->
      <template v-for="(pillar, colIndex) in pillars" :key="`gan-${colIndex}`">
        <div 
          class="grid-gan-cell" 
          :style="{ 
            gridColumn: getColumnIndex(colIndex), 
            color: pillar.gan ? getTianganColor(pillar.gan) : '' 
          }"
        >
          {{ pillar.gan }}
        </div>
        <template v-if="colIndex < pillars.length - 1">
          <div class="grid-spacer" :style="{ gridColumn: getColumnIndex(colIndex, true) }"></div>
        </template>
      </template>

      <!-- 地支行 -->
      <template v-for="(pillar, colIndex) in pillars" :key="`zhi-${colIndex}`">
        <div 
          class="grid-zhi-cell" 
          :style="{ 
            gridColumn: getColumnIndex(colIndex), 
            color: pillar.zhi ? getDizhiColor(pillar.zhi) : '' 
          }"
        >
          {{ pillar.zhi }}
        </div>
        <template v-if="colIndex < pillars.length - 1">
          <div class="grid-spacer" :style="{ gridColumn: getColumnIndex(colIndex, true) }"></div>
        </template>
      </template>

      <!-- 地支十神行 -->
      <template v-for="(pillar, colIndex) in pillars" :key="`tenshen-zhi-${colIndex}`">
        <div class="grid-tenshen-cell" :style="{ gridColumn: getColumnIndex(colIndex) }">
          {{ pillar.zhiLabel || '' }}
        </div>
        <template v-if="colIndex < pillars.length - 1">
          <div class="grid-spacer" :style="{ gridColumn: getColumnIndex(colIndex, true) }"></div>
        </template>
      </template>

      <!-- 底部标签行（动态生成） -->
      <template v-for="(row, rowIndex) in bottomLabelRows" :key="`bottom-${rowIndex}`">
        <template v-for="(pillar, colIndex) in pillars" :key="`bottom-${rowIndex}-${colIndex}`">
          <div class="grid-relation-cell" :style="{ gridColumn: getColumnIndex(colIndex) }">
            {{ row[colIndex] || '' }}
          </div>
          <template v-if="colIndex < pillars.length - 1">
            <div class="grid-spacer" :style="{ gridColumn: getColumnIndex(colIndex, true) }"></div>
          </template>
        </template>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { getTianganColor, getDizhiColor } from '@/utils/wuxing'

interface Pillar {
  gan: string
  zhi: string
  label?: string
  tenStar?: string
  zhiLabel?: string
}

interface Props {
  pillars: Pillar[]
  gender?: string // '男' 或 '女'
}

const props = withDefaults(defineProps<Props>(), {
  gender: '男'
})

// 社会关系数据
const socialRelationData = {
  正官: ['上司', '政府', '官运'],
  七杀: ['敌人', '小人', '恶势力', '权力'],
  正印: ['贵人', '房子', '文凭'],
  偏印: ['长辈', '意外助力', '精神追求'],
  比肩: ['同性朋友', '同性同辈'],
  劫财: ['异性朋友', '异性同辈'],
  食神: ['晚辈', '学生', '下属', '仆人'],
  伤官: ['晚辈', '下属', '仆人'],
  正财: ['稳定之财', '正途之财', '不动产'],
  偏财: ['意外之财', '暴发之财'],
}

// 根据十神获取关系标签数组
const getRelationsByTenStar = (tenStar: string): string[] => {
  if (!tenStar) return []
  return socialRelationData[tenStar as keyof typeof socialRelationData] || []
}

// 计算Grid列索引
const getColumnIndex = (colIndex: number, isSpacer: boolean = false): string => {
  if (isSpacer) {
    return `${colIndex * 2 + 2}`
  } else {
    return `${colIndex * 2 + 1}`
  }
}

// 生成顶部标签行（根据数组最大长度动态设置行数）
// 顶部标签行只显示天干十神对应的关系，日柱（index 2）固定显示"自己"
const topLabelRows = computed(() => {
  // 为每个柱子收集天干十神的关系标签（不包括日柱）
  const allLabels: string[][] = [[], [], [], []]
  
  props.pillars.forEach((pillar, colIndex) => {
    if (colIndex >= allLabels.length) return
    
    // 日柱（index 2）不收集关系，固定显示"自己"
    if (colIndex === 2) {
      return
    }
    
    // 只收集天干十神的关系
    if (pillar.tenStar) {
      const relations = getRelationsByTenStar(pillar.tenStar)
      relations.forEach(rel => {
        const labels = allLabels[colIndex]
        if (labels && !labels.includes(rel)) {
          labels.push(rel)
        }
      })
    }
  })
  
  // 找出最大标签数量（排除日柱）
  const maxLabels = Math.max(
    ...allLabels.map((labels, idx) => idx === 2 ? 0 : labels.length),
    0
  )
  
  // 即使最大标签数为0，也至少需要1行来显示日柱的"自己"
  const rowCount = Math.max(maxLabels, 1)
  
  // 根据最大长度动态创建行数组
  const rows: string[][] = []
  for (let i = 0; i < rowCount; i++) {
    rows.push([])
  }
  
  // 填充标签到行中（空白行在上，有内容的行在下）
  // 每个柱子的标签从底部开始显示，确保靠近天干行
  for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
    if (!rows[rowIndex]) rows[rowIndex] = []
    const row = rows[rowIndex]
    for (let colIndex = 0; colIndex < 4; colIndex++) {
      // 日柱（index 2）不填充，在模板中固定显示"自己"
      if (colIndex === 2) {
        if (row) {
          row[colIndex] = ''
        }
        continue
      }
      
      const labels = allLabels[colIndex]
      if (!labels || labels.length === 0) {
        if (row) {
          row[colIndex] = ''
        }
        continue
      }
      
      // 计算应该显示哪个标签：从下往上填充
      // rowIndex 0 是最上面，rowIndex rowCount-1 是最下面
      // 每个柱子的标签数量可能不同，需要从底部开始显示
      // 如果某个柱子有 labelCount 个标签，应该显示在最后 labelCount 行
      const labelCount = labels.length
      // 计算当前行应该显示哪个标签：从底部开始
      // rowIndex rowCount-1 (最下面) 应该显示 labels[labelCount - 1]
      // rowIndex rowCount-2 应该显示 labels[labelCount - 2]，如果 labelCount >= 2
      // 以此类推
      const labelIndex = labelCount - (rowCount - rowIndex)
      
      if (row && labelIndex >= 0 && labelIndex < labelCount) {
        row[colIndex] = labels[labelIndex] || ''
      } else if (row) {
        row[colIndex] = ''
      }
    }
  }
  
  return rows
})

// 生成底部标签行（根据数组最大长度动态设置行数）
// 底部标签行只显示地支十神对应的关系
// 每个柱子的标签从底部开始显示，确保靠近地支行
const bottomLabelRows = computed(() => {
  // 为每个柱子收集地支十神的关系标签
  const allLabels: string[][] = [[], [], [], []]
  
  props.pillars.forEach((pillar, colIndex) => {
    if (colIndex >= allLabels.length) return
    
    // 只收集地支十神的关系
    if (pillar.zhiLabel) {
      const relations = getRelationsByTenStar(pillar.zhiLabel)
      relations.forEach(rel => {
        const labels = allLabels[colIndex]
        if (labels && !labels.includes(rel)) {
          labels.push(rel)
        }
      })
    }
  })
  
  // 找出最大标签数量
  const maxLabels = Math.max(...allLabels.map(labels => labels.length), 0)
  
  // 如果最大标签数为0，返回空数组
  if (maxLabels === 0) {
    return []
  }
  
  // 根据最大长度动态创建行数组
  const rows: string[][] = []
  for (let i = 0; i < maxLabels; i++) {
    rows.push([])
  }
  
  // 填充标签到行中（从上面开始显示，空白行在下）
  // rowIndex 0 是最上面（靠近地支行），rowIndex maxLabels-1 是最下面
  for (let rowIndex = 0; rowIndex < maxLabels; rowIndex++) {
    if (!rows[rowIndex]) rows[rowIndex] = []
    const row = rows[rowIndex]
    for (let colIndex = 0; colIndex < 4; colIndex++) {
      const labels = allLabels[colIndex]
      if (!labels || labels.length === 0) {
        if (row) {
          row[colIndex] = ''
        }
        continue
      }
      
      // 计算应该显示哪个标签：从上往下填充
      // 每个柱子的标签数量可能不同，需要从上面开始显示
      // 如果某个柱子有 labelCount 个标签，应该显示在前 labelCount 行
      const labelCount = labels.length
      // 计算当前行应该显示哪个标签：从上面开始
      // rowIndex 0 (最上面，靠近地支行) 应该显示 labels[0]
      // rowIndex 1 应该显示 labels[1]，如果 labelCount >= 2
      // 以此类推
      const labelIndex = rowIndex
      
      if (row && labelIndex >= 0 && labelIndex < labelCount) {
        row[colIndex] = labels[labelIndex] || ''
      } else if (row) {
        row[colIndex] = ''
      }
    }
  }
  
  return rows
})

// 计算总行数（动态计算顶部和底部标签行数）
const totalRows = computed(() => {
  const topRowsCount = topLabelRows.value.length
  const bottomRowsCount = bottomLabelRows.value.length
  return topRowsCount + 1 + 1 + 1 + 1 + bottomRowsCount // 顶部标签(动态) + 天干十神(1) + 天干(1) + 地支(1) + 地支十神(1) + 底部标签(动态)
})
</script>

<style scoped>
.social-relation {
  background: #fff;
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 主容器：使用Grid表格布局 */
.social-relation-grid {
  display: grid;
  grid-template-columns: 1fr 8px 1fr 8px 1fr 8px 1fr; /* 柱子列自适应，间隔列固定 */
  /* grid-template-rows 通过内联样式动态设置 */
  gap: 0;
  width: 100%;
  max-width: 100%;
  padding: 16px 0;
  justify-items: center;
  align-items: center;
  box-sizing: border-box;
}

/* 天干字符单元格 */
.grid-gan-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  box-sizing: border-box;
  width: 100%;
}

/* 地支字符单元格 */
.grid-zhi-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  padding: 8px 0;
  box-sizing: border-box;
  width: 100%;
}

/* 十神单元格 */
.grid-tenshen-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  color: #94a3b8;
  font-weight: 500;
  padding: 4px 8px;
  min-height: 20px;
  box-sizing: border-box;
  width: 100%;
}

/* 社会关系单元格 */
.grid-relation-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  color: #000;
  font-weight: 500;
  padding: 4px 8px;
  min-height: 20px;
  box-sizing: border-box;
  width: 100%;
}

/* 间隔单元格 */
.grid-spacer {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>
